<template>
  <div class="layerstree">
    <el-button type="primary" @click="visible = true" round
      ><el-icon><Files /></el-icon
    ></el-button>
    <el-drawer v-model="visible" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="contain">
          <h4 :id="titleId" :class="titleClass">图层目录树</h4>
          <el-button type="danger" @click="close">
            <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
            关闭
          </el-button>
        </div>
      </template>
      <div v-for="item in layersData">
        <input
          type="checkbox"
          checked
          @change="isShow($event, item.LayerIndex)"
        />
        <el-text size="large" type="primary">{{ item.Name }}</el-text>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { getLayersHook } from "./hooks/getLayersHook";
const { layersData, isShow } = getLayersHook();
const visible = ref(false);
</script>

<style lang="scss" scoped>
.layerstree {
  position: absolute;
  top: 235px;
  left: 0px;
  margin-left: 2px;
  z-index: 1000;
}
.contain {
  display: flex;
  background-color: #409eff;
}
:deep(.el-drawer) {
  width: 14% !important;
  height: 28%;
  .el-drawer__header {
    margin: 0;
    padding: 0;
  }
  .el-drawer__body {
    margin: 0;
    padding: 0;
  }
}
</style>
